<template>
	<view>
		<u-navbar title="计划详情" :background="navbarBg" title-color="#fff" :border-bottom="false" back-icon-color="#fff"></u-navbar>
		
		<!-- <view class="top-tips" v-if="planDetail.status >= 3" @click="linkToOrder"><u-icon name="info-circle" class="icon"></u-icon>当前采购计划已审核完成，点此前往订单页面查看收货详情</view> -->
		<view class="container" :class="hasBtn ? '' : 'no-btn'" v-if="planDetail">
			
			<view class="box" v-if="planDetail.orderWeightStatsiticVo.verifiedWeight">
				<view class="title no-border-bottom">配送信息</view>
				<view class="info-list">
					<view class="item">
						<text class="v">{{planDetail.orderWeightStatsiticVo ? planDetail.orderWeightStatsiticVo.deliveried : 0}}</text>
						<text class="t">已发车</text>
					</view>
					<!-- <view class="item">
						<text class="v">{{detail.orderWeightStatsiticVo ? detail.orderWeightStatsiticVo.toBedeliveried : 0}}</text>
						<text class="t">待发车</text>
					</view> -->
					<view class="item">
						<text class="v">{{planDetail.orderWeightStatsiticVo ? planDetail.orderWeightStatsiticVo.verifiedWeight : 0}}<text class="tips">t</text></text>
						<text class="t">已收货</text>
					</view>
					<view class="item">
						<text class="v" :class="(planDetail.offset - 1) > 0 ? 'success' : 'danger'">{{(planDetail.offset - 1) > 0 ? '+' : ''}}{{(planDetail.offset - 1).toFixed(2)}}</text>
						<text class="t">偏差</text>
					</view>
				</view>
			</view>
			
			<view class="box">
				<view class="title">计划信息</view>
				<view class="list">
					<view class="item">
						<text class="label">计划编号：</text>
						<text class="value u-line-1">{{planDetail.num}}</text>
					</view>
					<view class="item">
						<text class="label">发起时间：</text>
						<text class="value u-line-1">{{planDetail.createTime}}</text>
					</view>
				</view>
			</view>
			
			<view class="box">
				<view class="title">{{planDetail.title}}</view>
				<view class="list">
					<view class="item">
						<text class="label">供应商单位：</text>
						<text class="value u-line-1">{{planDetail.supplierName}}</text>
					</view>
					<view class="item">
						<text class="label">要求供应时间：</text>
						<text class="value u-line-1">{{planDetail.supplyTime}}</text>
					</view>
					<view class="item">
						<span class="label">卸货位置：</span>
						<span class="value u-line-1">{{planDetail.locationName}}</span>
					</view>
					<view class="item">
						<span class="label">预计所需算量：</span>
						<span class="value u-line-1">{{planDetail.totalBudget}}t</span>
					</view>
				</view>
			</view>
			
			<view class="box">
				<view class="title">审批流程</view>
				<view class="timeline">
					<u-time-line>
						<u-time-line-item v-for="(item,index) in planDetail.approvalProcessVos" :key="index" nodeTop="4">
							<template v-slot:node>
								<view class="u-node" :style="item.status != 1 || index == 0 ? 'background: #19be6b;' : ''">
									<u-icon :name="index == 0 ? 'yewuliufaqibeifen2x' : 'shenpi'" custom-prefix="custom-icon" color="#fff" :size="22"></u-icon>
								</view>
							</template>
							<template v-slot:content>
								<view>
									<view class="name">
										<text>{{item.opretorName}}</text>
										<u-tag v-if="item.status == 0" :text="item.opretorRoleName" type="warning" shape="circle" size="mini" mode="dark"/>
										<u-tag v-else :text="item.status == 1 ? '审批中' : item.status == 3 ? '审批通过' : '审批驳回'" :type="item.status == 1 ? 'info' : item.status == 3 ? 'success' : 'error'" shape="circle" size="mini" mode="dark"/>
									</view>
									<view class="desc" v-if="item.opretorDesc">{{item.opretorDesc}}</view>
									<view class="time">{{item.opretorTime}}</view>
								</view>
							</template>
						</u-time-line-item>
						
					</u-time-line>
				</view>
				
			</view>
			
		</view>
		
		<view class="btn-box" v-if="planDetail.status == 0 || planDetail.status == 5">
			<template>
				<view class="save" @click="refuseBox = true">拒绝</view>
				<view class="submit" @click="agree">同意</view>
			</template>
			
			<!-- <template v-if="planDetail.status == 1 && userinfo.id == planDetail.createBy && !planDetail.reviewable">
				<view class="submit1 info" @click="del">计划撤回</view>
			</template>
			<template v-if="planDetail.status == 1 && userinfo.id == planDetail.createBy && planDetail.reviewable">
				<view class="save" @click="del">撤回</view>
				<view class="submit" @click="agree">同意</view>
			</template>
			<template v-if="planDetail.status == 2 && userinfo.id == planDetail.createBy">
				<view class="submit1" @click="edit">重新提交</view>
			</template> -->
		</view>
		
		<u-popup v-model="refuseBox" mode="center" width="650rpx" border-radius="20" >
			<view class="refuse-box">
				<view class="title">请输入驳回理由：</view>
				<u-input type="textarea" v-model="rejectReason" height="200" :border="true" />
				<view class="btns">
					<u-button type="info" size="medium" :custom-style="btnStyle" @click="refuseBox = false">取消</u-button>
					<u-button type="primary" size="medium" :custom-style="btnStyle" @click="refuse">确定</u-button>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				navbarBg:{'background':'rgba(0, 130, 255, 1)'},
				planId:"",
				planDetail:null,
				refuseBox:false,
				rejectReason:"",
				btnStyle:{
					margin:'0 20rpx'
				},
				hasBtn:false,
			}
		},
		onLoad(options){
			this.planId = options.id
			this.getPlanDetail()
		},
		computed:{
			userinfo(){
				return JSON.parse(this.vuex_userInfo).user_info
			}
		},
		methods:{
			linkToOrder(){
				uni.navigateTo({
					url:`/pages/order/detail?id=${this.planId}`
				})
			},
			//获取采购计划详情
			getPlanDetail(){
				let userinfo = JSON.parse(this.vuex_userInfo).user_info
				this.$u.api.getOrderDetail(this.planId).then(res => {
					if(res.code != 0){
						this.$u.toast(res.msg)
						return false
					}
					this.planDetail = res.data
					this.hasBtn = ((this.planDetail.status == 1 || this.planDetail.status == 2) && this.planDetail.reviewable) || (this.planDetail.status == 1 && userinfo.id == this.planDetail.createBy) || (this.planDetail.status == 2 && userinfo.id == this.planDetail.createBy)
					
				})
			},
			agree(){
				uni.showModal({
					content:'确认通过此计划审批？',
					success: (res) => {
						if(res.confirm){
							this.review(3)
						}
					}
				})
			},
			refuse(){
				if(!this.rejectReason){
					this.$u.toast("请输入驳回理由")
					return false
				}
				this.review(2)
			},
			//审批
			async review(status){
				uni.showLoading({
					mask:true
				})
				let res = ''
				
				if(this.planDetail.status == 0){
					res = await this.$u.api.reviewOrder({rejectReason:this.rejectReason,id:this.planId,status:status})
				}else{
					res = await this.$u.api.applyOrderReview({rejectReason:this.rejectReason,id:this.planId,status:status})
				}
				if(res.code != 0){
					this.$u.toast(res.msg)
					return false
				}
				this.$u.toast('审批提交成功')
				uni.navigateBack({
					delta:1
				})
				this.pageRefresh()
				uni.hideLoading()
				
				
				// this.$u.api.reviewOrder({
				// 	rejectReason:this.rejectReason,
				// 	id:this.planId,
				// 	status:status
				// }).then(res => {
				// 	if(res.code != 0){
				// 		this.$u.toast(res.msg)
				// 		return false
				// 	}
				// 	this.$u.toast('审批提交成功')
				// 	uni.navigateBack({
				// 		delta:1
				// 	})
				// 	this.pageRefresh()
				// 	uni.hideLoading()
				// }).catch(()=>{
				// 	uni.hideLoading()
				// })
			},
			//重新提交
			edit(){
				uni.redirectTo({
					url:"/pages/project/edit?id=" + this.planId
				})
			},
			pageRefresh(){
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				
				prevPage.$vm.refresh();
			},
			//撤回
			del(){
				uni.showModal({
					content:'确认撤回该计划？',
					success: (res) => {
						if(res.confirm){
							this.$u.api.cancelPlan({id:this.planId}).then(res => {
								if(res.code != 0){
									this.$u.toast(res.msg)
									return false
								}
								this.$u.toast('提交成功')
								this.pageRefresh()
								uni.navigateBack({delta:1})
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		padding: 30rpx;
		padding-bottom: calc(148rpx + env(safe-area-inset-bottom));
		&.no-btn{
			padding-bottom: 30rpx;
		}
		.box{
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 24rpx;
			margin-bottom: 20rpx;
			.title{
				font-size: 34rpx;
				font-weight: 800;
				border-bottom: 1px solid rgba(0, 0, 0, 0.1);
				padding-bottom: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.list{
				.item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 20rpx;
					font-size: 28rpx;
					.label{
						color: #798188;
					}
					.value{
						color:#333;
						max-width: 400rpx;
					}
				}
			}
		}
	}
	.timeline{
		padding: 30rpx 20rpx 0;
		.name{
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;
			text{
				margin-right: 20rpx;
				font-size: 28rpx;
			}
		}
		.time{
			font-size: 24rpx;
			color: #798188;
		}
		.u-node {
			width: 34rpx;
			height: 34rpx;
			border-radius: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #d0d0d0;
		}
		.desc{
			color: rgba(150,150,150,1);
			margin-bottom: 6rpx;
		}
	}
	.btn-box{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx;
		font-size: 34rpx;
		color: #fff;
		text-align: center;
		padding-bottom:calc(30rpx + env(safe-area-inset-bottom)); 
		.save{
			width: 50%;
			height: 88rpx;
			line-height: 88rpx;
			background: #B6D5FF;
			border-radius: 16rpx 0px 0px 16rpx;
		}
		.submit{
			width: 50%;
			height: 88rpx;
			line-height: 88rpx;
			background: #1378FF;
			border-radius: 0px 16rpx 16rpx 0px;
		}
		.submit1{
			width: 100%;
			height: 78rpx;
			background: #1378FF;
			border-radius: 16rpx;
			line-height: 78rpx;
		}
		.info{
			background: #909399;
		}
	}
	.refuse-box{
		padding: 30rpx;
		.title{
			font-size: 28rpx;
			margin-bottom: 20rpx;
		}
		.btns{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 30rpx;
			.u-btn{
				margin:0 20rpx;
			}
		}
	}
	.top-tips{
		background: #19be6b;
		padding: 16rpx 24rpx;
		color: #fff;
		font-size: 24rpx;
		position: fixed;
		left: 0;
		right: 0;
		z-index: 999;
		.icon{
			margin-right: 6rpx;
		}
	}
	.info-list{
		display: flex;
		padding-top: 20rpx;
		.item{
			width: 50%;
			display: flex;
			flex-direction: column;
			border-right: 1px solid rgba(212, 226, 237, 0.6);
			box-sizing: border-box;
			justify-content: center;
			align-items: center;
			&:last-child{
				border-right: none;
				margin-right: 0;
			}
			.v{
				font-size: 36rpx;
				font-weight: 500;
				color: #FF6600;
				.tips{
					font-size: 26rpx;
					margin-left: 3px;
				}
				&.success{
					color: #fa3534;
				}
				&.danger{
					color: #19be6b;
				}
			}
			.t{
				font-size: 24rpx;
				color: #888;
				margin-top: 6rpx;
				
			}
		}
	}
</style>
